<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1,#d2{
            width: 400px;height: 100px;
            border: 1px solid black;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <!-- 拖拽 -->
   <p id="p" draggable="true">还是得看大家快来,VEO道歉</p>
   <p id="p2" draggable="true">还是得看好吃,VEO道歉</p>
    </div>
    <div id="d2">

    </div>
    <script>
          //p2
          let p2 = document.getElementById('p2');
          p2.addEventListener('dragstart',function(event){
            let dt = event.dataTransfer;
            dt.setData('tagname','i');
            dt.setData('innerHTML',p2.innerHTML);
          })


           //源对象
        let p = document.getElementById('p');
        p.addEventListener("dragstart",function(event){
            console.log('dragstart...');
          // 把当前拖拽的标签名， 内容都存起来，  DataTransfer
          let dt = event.dataTransfer;
          dt.setData('tagname','p');
          dt.setData('innerHTML',p.innerHTML);
        })
        p.addEventListener("drag",function(){
         //   console.log('drag...');
        })
        p.addEventListener("dragend",function(){
           // console.log('dragend...');
        })
      let d2 = document.getElementById('d2');
      d2.addEventListener('dragenter',function(){
          console.log('dragenter...')
      })
      d2.addEventListener('dragover',function(event){
        event.preventDefault();//阻止浏览器默认时事件的产生
          console.log('dragover...')
      })
      d2.addEventListener('dragleave',function(){
         
          console.log('dragleave...')
      })
      d2.addEventListener('drop',function(event){
          console.log('drop...')
        //获取当前拖拽的年元素，标签
        let dt = event.dataTransfer;
        let tag = dt.getData('tagname');
        let ele = document.createElement(tag);//生成新元素
        ele.innerHTML = dt.getData('innerHTML');
      //追加到d2中
      d2.appendChild(ele);





         //一下两行 解决firefox兼容性问题 （听老师就对了）
      event.preventDefault();
      event.stopPropagation();
      })
    </script>
</body>
</html>